<template>

	<view class="devices" v-if="list.length">
		<view class="devices_item" v-for="(item, i) in list" :key="i" @click="$rui.route(item.path)">
			<view class="devices_item_header">
				<view class="devices_item_header_name">
					{{item.name}}
				</view>
				<view class="devices_item_header_category">
					{{item.alias}}
				</view>
				<view class="devices_item_header_more">
					...
				</view>
			</view>
			<view class="devices_item_pic">
				<image class="devices_item_pic_image" :src="item.image" mode=""></image>
			</view>
		</view>
	</view>
	<view class="no" v-else>
		<view class="no_box" @click="toScan">
			<view class="no_box_title">
				{{user.isLogin ? '您还未绑定设备':'您还未登录'}}
			</view>
			<view class="no_box_desc">
				{{user.isLogin ? '快去绑定您的设备吧':'快起登录后管理设备吧'}}
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"

	import {
		userStore
	} from "@/store/index.js"
	let user = userStore();

	defineProps({
		list: Array
	})

	const toScan = () => {
		if (!user.isLogin) {
			uni.$rui.route('/pages/user/login/login')
			return false;
		}
		uni.$rui.route('/pages/bluetooth/scan/scan')
	}
</script>

<style lang="scss">
	.no {
		&_box {
			margin: 30rpx;
			background: #fff;
			padding: 100rpx 30rpx;
			border-radius: 25rpx;
			text-align: center;

			&_title {
				font-size: 38rpx;
				font-weight: bold;
			}

			&_desc {
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #f5f7f8;
		padding: 80rpx 0 0;
		z-index: 9;
	}

	.nav {
		white-space: nowrap;
		position: relative;
		height: 80rpx;
		padding: 20rpx 10rpx 0;

		&_item {
			display: inline-block;
			padding: 0 20rpx;
			text-align: center;
			transition: color 0.3s ease;
		}

		.action {
			font-weight: bolder;
			position: relative;
			font-size: 38rpx;

			&::before {
				content: "";
				display: block;
				height: 8rpx;
				border-radius: 30rpx;
				width: calc(100% - 40rpx);
				transform: translate(-50%);
				position: absolute;
				bottom: -15rpx;
				left: 50%;
				background: var(--color);
				transition: left 0.3s ease;
			}
		}
	}


	.devices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
		margin: 30rpx;

		&_item {
			background: #fff;
			padding: 30rpx;
			border-radius: 25rpx;
			box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, .02);
			height: 300rpx;

			&_pic {
				text-align: center;
				margin-top: 20rpx;

				&_image {
					height: 200rpx;
					width: 200rpx;
				}
			}


			&_header {
				position: relative;

				&_name {
					font-size: 36rpx;
					font-weight: bold;
				}

				&_category {
					font-weight: 24rpx;
					color: gray;
					font-size: 28rpx;
				}

				&_more {
					position: absolute;
					right: 0;
					top: 0;

				}
			}
		}
	}
</style>